<template>
    <common-container v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中…">
        <div slot="common-search">
            <div class="common-btn">
                <el-button type="primary" size="mini" @click="exportExcelChild">导出excel</el-button>
            </div>

            <div class="search-common">
                <el-form :inline="true" :model="searchForm" ref="searchForm" size="mini">

                    <el-row :gutter="10">
                        <el-col :sm="8">
                            <el-form-item label="" prop="recode_name">
                                <el-input placeholder="请输入内容" v-model="searchForm.recode_name" class="input-with-select">
                                    <el-select v-model="searchForm.recode_select" slot="prepend" placeholder="请选择" style="width:150px;">
                                        <el-option label="订单编号" value="1"></el-option>
                                        <el-option label="子订单号" value="2"></el-option>
                                        <el-option label="股票名称" value="3"></el-option>
                                        <el-option label="股票代码" value="4"></el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                            <el-form-item label="子订单状态" prop="recode_name">
                                <el-select v-model="searchForm.recode_select" placeholder="请选择" style="width:100px;">
                                    <el-option label="全部" value="1"></el-option>
                                    <el-option label="支付成功" value="2"></el-option>
                                    <el-option label="已下单" value="3"></el-option>
                                    <el-option label="已作废" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                            <el-form-item label="订单金额">
                                <el-input v-model="searchForm.startpearl" placeholder="请输入数值" controls-position="right" style="width:100px"></el-input>
                                -
                                <el-input v-model="searchForm.endpearl" placeholder="请输入数值" controls-position="right" style="width:100px"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="10">
                        <el-col :sm="8">
                            <el-form-item label="订单创建时间">
                                <el-date-picker v-model="searchForm.orderTime" :picker-options="pickerOptions" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                            <el-form-item>
                                <el-button type="primary" @click="searchFromChild">查询</el-button>
                                <el-button type="info" @click="resetForm('searchForm')">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

        </div>
        <div slot="common-body">
            <template v-for="item of  tableData">
                <div class="order_table-list" :key="item.id">
                    <div class="order_table-item color-6d727a" @click="showOrderList(item)">
                        <i class="pl10" :class="[item.isShow?'el-icon-arrow-down':'el-icon-arrow-right']"></i>
                        <span>订单编号：
                            <strong class="bold"> 10810000001</strong>
                        </span>
                        <span>订单创建时间：2018-12-12 08:12:3</span>
                        <span>订单状态：
                            <i class="red">支付失败</i>
                        </span>
                        <span>支付金额：
                            <strong class="bold"> 10810000001</strong>
                        </span>
                        <span>创建者:张三</span>
                        <span>转账流水号：54654534321324135</span>
                    </div>
                    <div class="order_table_child" v-show="item.isShow">
                        <div class="common-btn">
                            总代佣金合计：2300.00
                             <el-button type="success" size="mini" >订单结算</el-button>
                        </div>
                        <el-table :data="tableData" border style="width: 100%" size="mini">
                            <el-table-column prop="date" label="子订单号">
                            </el-table-column>
                            <el-table-column prop="name" label="股票名称">
                            </el-table-column>
                            <el-table-column prop="address" label="名义本金">
                            </el-table-column>
                            <el-table-column prop="address" label="交易日">
                            </el-table-column>
                            <el-table-column prop="address" label="合约期限">
                            </el-table-column>
                            <el-table-column prop="address" label="成交权利价格">
                            </el-table-column>
                            <el-table-column prop="address" label="成交权利金比例">
                            </el-table-column>
                            <el-table-column prop="address" label="支付权利金">
                            </el-table-column>
                            <el-table-column prop="address" label="总代点差">
                            </el-table-column>
                            <el-table-column prop="address" label="总代佣金">
                            </el-table-column>

                        </el-table>

                    </div>
                </div>
            </template>

        </div>
        <div slot="common-page">
            <page-pagination v-on:pageFun="pageFunNumber" :page="page" :pageSize="pageSize" :total="total"></page-pagination>
        </div>
    </common-container>
</template>

<script>
import service from "@/service";
import pagePagination from "@/components/Common/pagePagination";
// import commonDialog from "@/components/Common/CommonDialog";
import commonContainer from "@/components/Common/CommonContainer";
import { computedDay184, dateFormat } from '@/assets/utils.js'
export default {
    props: ['breadcrumb'],
    data() {
        return {
            page: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            tableData: [{
                id: 100001,
                isShow: false,
                order_num: '10810000001'
            }],
            searchForm: {
                type: "",
                refund_status: "",
                source: "",
                recode_select: "1",
                orderTime: [computedDay184(), dateFormat(new Date())],
                agent_num: "",
                recode_name: "",
                startpearl: "",
                endpearl: ""
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            }
        }
    },
    created() {
        this.$store.dispatch('setNavName', this.breadcrumb);
    },
    methods: {
        //点击展开
        showOrderList(item) {
            item.isShow = !item.isShow;
        },
        //查询列表
        queryTableList(page = 1) {

        },
        //分页
        pageFunNumber(page) {
            this.queryTableList(page);
        },
        //导出
        exportExcelChild() {

        },
        //查询
        searchFromChild() { },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    components: {
        pagePagination,
        commonContainer
    }
}
</script>

<style scoped>
.order_table-list {
  border: 1px solid #f2f2f2;
  border-bottom: 0;
  cursor: pointer;
}
.order_table-list:last-child {
  border-bottom: 1px solid #f2f2f2;
}
.order_table-item {
  display: flex;
  align-items: center;
}
.order_table-item span {
  flex: 1;
  padding: 15px 10px;
}
.order_table_child {
  border-top: 1px solid #f2f2f2;
  background: #f2f2f2;
  padding: 10px;
}
</style>